<template>
  <div class="dashboard-container">
    <el-row>
      <el-col :span="8">
        <div>
          <el-statistic
            group-separator=","
            :precision="0"
            :value="summary.userCount"
            title="用户数量"
          ></el-statistic>
        </div>
      </el-col>
      <el-col :span="8">
        <div>
          <el-statistic
            group-separator=","
            :precision="0"
            :value="summary.postCount"
            title="岗位数量"
          ></el-statistic>
        </div>
      </el-col>
      <el-col :span="8">
        <div>
          <el-statistic
            group-separator=","
            :precision="0"
            :value="summary.deptCount"
            title="部门数量"
          ></el-statistic>
        </div>
      </el-col>
    </el-row>
    <div id="myChart"></div>
  </div>
</template>

<script>
import api from "@/api/system/dashboard";
export default {
  name: "Dashboard",
  data() {
    return {
      summary: {},
      countArr: [],
      dateArr: [],
    };
  },
  mounted() {
    this.loadSummary();
    this.loadProcessCount();
  },

  methods: {
    loadSummary() {
      api.getSummary().then((res) => {
        this.summary = res.data;
      });
    },
    loadProcessCount() {
      api.getProcessCount().then((res) => {
        this.countArr = res.data.countList;
        this.dateArr = res.data.dateList;
        //此处调用echarts方法 否则获取不到数据
        this.drawLine();
      });
    },
    drawLine() {
      var myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        title: { text: "近七天审批提交量" },
        tooltip: {},
        xAxis: {
          data: this.dateArr.reverse(),
        },
        yAxis: {},
        series: [
          {
            name: "审批",
            type: "line",
            data: this.countArr.reverse(),
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.el-statistic{
  margin-left: 2px;
  margin-right: 2px;
  border: 2px solid gray; 
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}
#myChart {
  width: 1000px;
  height: 500px;
  margin: auto;
  margin-top: 150px;
}
</style>
